<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <link href="${pageContext.servletContext.contextPath}/images/milogo.png" rel="icon" type="image/x-icon">
    <title>收货地址</title>
    <script type="text/javascript" src="${pageContext.servletContext.contextPath}/st/front/JS/jquery-3.2.1.min.js"></script>
    <script>
        //ajax 删除
        function ajaxRemove (aid){
            $.ajax({
                type:"post",
                url:"${pageContext.servletContext.contextPath}/ajax_DelAddress",
                async:false,
                dataType: "text",
                data:{aid:aid},
                success:function (res){
                                if(res==1){
                                    $(this).parent().parent().parent().remove();
                                    console.log("删除");
                                            }
                                        }
            });
        };
        //ajax 修改地址
        function ajaxUpdate (name,tel,addres,aid){
            $.ajax({
                type:"post",
                url:"${pageContext.servletContext.contextPath}/ajax_UpAddress",
                async:false,
                dataType: "text",
                data:{name:name,tel:tel,addres:addres,aid:aid},
                success:function (res){
                    if(res==1){
                        alert("修改成功！请刷新");
                        console.log("修改成功");
                    }
                }
            });
        };
        //ajax 添加
        function ajaxAdd (name,tel,address){
            $.ajax({
                type:"post",
                url:"${pageContext.servletContext.contextPath}/ajax_addAddress",
                async:false,
                dataType: "text",
                data:{name:name,tel:tel,addres:address},
                success:function (res){
                    if(res==1){
                        $(".address-item:last").after("<div class='address-item' data-v-039a89f6=''>"+
                                        "<div class='address-info' data-v-039a89f6=''>"+
                                            "<div class='name' data-v-039a89f6=''>"+name+"</div>"+
                                            "<div class='tel' data-v-039a89f6=''>"+tel+"</div>"+
                                            "<div class='address-con' data-v-039a89f6=''>"+
                                                "<span data-v-039a89f6=''>"+address+"</span>"+
                                            "</div>"+
                                            "<div class='address-action' data-v-039a89f6=''>"
                                                +"<span class='update' data-v-039a89f6=''>修改</span>"+
                                                "<span class='remove' data-v-039a89f6=''>删除</span>"+
                                            "</div>"+
                                        "</div>"+
                                        "<div class='address-info-solt' data-v-039a89f6='' style='display: none;'></div>"+
                                    "</div>");
                        console.log("修改成功");
                    }
                }
            });
        };
        $(function(){
            $(".mi-popup2").hide();
            $(".mi-popup").hide();
            //点击X关闭
            $(".mi-dialog__headerbtn").click(function(){
                $(".mi-popup").hide();
                $(".mi-popup2").hide();
            })
            //点击+显示
            $(".add-desc").click(function(){

                var length=$(".address-item").length;
                if(length==9){
                    alert("最多保存8个地址");
                }else{
                    $("[name=name]").val("");
                    $("[name=telephone]").val("");
                    $("[name=addressInfo]").val("");
                    $(".mi-popup").show();
                }
            })
            //点击取消 隐藏
            $(".btn-gray").click(function(){
                $(".mi-popup").hide();
                $(".mi-popup2").hide();
            })
            $(".remove").on("click",function (){
                var aid=$(this).parent().parent().parent().find(".address-info-solt").html();
                //alert(a);
                ajaxRemove(aid);
                $(this).parent().parent().parent().remove();
            });
            //点击修改
            $(".update").on("click",function (){
                var father=$(this).parent().parent().parent();
                var name=father.find(".name").html();
                var tel=father.find(".tel").html();
                var address=father.find(".address-con").children().eq(0).html();
                var aid=$(this).parent().parent().parent().find(".address-info-solt").html();
                // alert(name+tel+address);
                $("[name=name]").val(name);
                $("[name=telephone]").val(tel);
                $("[name=addressInfo]").val(address);
                $(".aid").html(aid);
                $(".mi-popup2").show();
            });
            //修改地址
            $(".mi-popup2 .btn-primary").on("click",function (){
                var name=$(this).parent().parent().parent().find("[name=name]").val();
                var tel=$(this).parent().parent().parent().find("[name=telephone]").val();
                var address=$(this).parent().parent().parent().find("[name=addressInfo]").val();
                var aid=$(".aid").html();
                //alert(name+tel+address+aid);
                ajaxUpdate(name,tel,address,aid);
                $(".mi-popup2").hide();
            });
            //点击确定  添加地址
            $(".mi-popup .btn-primary").on("click",function (){
                var name=$(this).parent().parent().parent().find("[name=name]").val();
                var tel=$(this).parent().parent().parent().find("[name=telephone]").val();
                var sheng=$("#sheng").val();
                var shi=$("#shi").val();
                var qu=$("#qu").val();
                var add=$(this).parent().parent().parent().find("[name=addressInfo]").val();
                var address=sheng+shi+qu+add;
               // alert(name+tel+address);
                ajaxAdd(name,tel,address);
                $(".mi-popup").hide();
            });
        })
        $("#distpicker1").distpicker();
    </script>
    <link as="style" href="${pageContext.servletContext.contextPath}/st/front/CSS/address.5087a172.css" rel="preload">
    <link href="${pageContext.servletContext.contextPath}/st/front/CSS/address.5087a172.css" rel="stylesheet">
</head>
<body id="stat_e3c9df7196008778">
<jsp:include page="/Front_Head"></jsp:include>
<div id="app">
    <div class="breadcrumbs">
        <div class="container">
            <a href="${pageContext.servletContext.contextPath}/index">首页</a>
            <span class="sep">/</span>
            <span>收货地址</span>
        </div>
    </div>
    <div class="mi-address page-main">
        <div class="container ">
            <div class="row">
                <div class="span4">
                    <div class="user-address-menu" id="J_userMenu">
                        <div class="menu-box">
                            <h3 class="title">订单中心</h3>
                            <ul class="list">
                                <li><a href="${pageContext.servletContext.contextPath}/Order_center" >我的订单</a></li>
                                <li><a data-name="bracket" href="#" id="J_comment" >评价晒单</a></li>
                            </ul>
                        </div>
                        <div class="menu-box">
                            <h3 class="title">个人中心</h3>
                            <ul class="list">
                                <li><a href="${pageContext.servletContext.contextPath}/Center" >我的个人中心</a></li>
                                <li><a href="${pageContext.servletContext.contextPath}/GetColl" >喜欢的商品</a></li>
                                <li class="active"><a href="${pageContext.servletContext.contextPath}/Address" >收货地址</a></li>
                            </ul>
                        </div>
                        <div class="menu-box">
                            <h3 class="title">账户管理</h3>
                            <ul class="list">
                                <li><a href="${pageContext.servletContext.contextPath}/GoPersonal"  target="_blank">个人信息</a>
                                </li>
                                <li><a href="${pageContext.servletContext.contextPath}/UpdatePass"  target="_blank">修改密码</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="mi-address-box span16">
                    <div class="box">
                        <h1>收货地址</h1>
                        <div class="address-box">
                            <div class="address-list" data-v-039a89f6="">
                                <!--加地址-->
                                <div class="address-item" data-v-039a89f6="">
                                    <div class="add-desc" data-v-039a89f6="">
                                        <i class="iconfont iconfont-plus" data-v-039a89f6=""></i>
                                        <span data-v-039a89f6="">添加新地址</span>
                                    </div>
                                </div>
                                <!--循环-->
                                <c:forEach items="${addressList}" var="addList">
                                    <div class="address-item" data-v-039a89f6="">
                                        <div class="address-info" data-v-039a89f6="">
                                            <div class="name" data-v-039a89f6="">${addList.aname}</div>
                                            <div class="tel" data-v-039a89f6="">${addList.phonenum}</div>
                                            <div class="address-con" data-v-039a89f6="">
                                                <span data-v-039a89f6="">${addList.address}</span>
                                            </div>
                                            <div class="address-action" data-v-039a89f6="">
                                                <span class="update" data-v-039a89f6="">修改</span>
                                                <span class="remove" data-v-039a89f6="">删除</span>
                                            </div>
                                        </div>
                                        <div class="address-info-solt" data-v-039a89f6="" style="display: none;">${addList.aid}</div>
                                    </div>
                                </c:forEach>
                                <!---->
                                <!---->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="mi-popup" data-v-54b15c30="" data-v-f6440f00="" style="z-index: 100;">
    <div class="mi-popup__mask mi-modal" data-v-f6440f00=""></div>
    <div class="mi-popup__box" data-v-f6440f00="">
        <div class="mi-popup__content" data-v-f6440f00="">
            <div class="mi-dialog__wrapper address-modal" data-v-54b15c30="" data-v-f6440f00="" style="width: 660px;">
                <div aria-modal="true" class="mi-dialog" data-v-54b15c30="" data-v-f6440f00="">
                    <div class="mi-dialog__header" data-v-54b15c30="" data-v-f6440f00="">
                        <span class="mi-dialog__title" data-v-54b15c30="" data-v-f6440f00="">添加收货地址</span>
                    </div>
                    <a class="mi-dialog__headerbtn" data-v-54b15c30="" data-v-f6440f00="">
                        <i class="mi-dialog__close iconfont" data-v-54b15c30="" data-v-f6440f00=""></i>
                    </a>
                    <div class="mi-dialog__body" data-v-54b15c30="" data-v-f6440f00="">
                        <div class="mi-dialog__inner">
                            <div class="address-add" data-v-6702e325="">
                                <div class="item" data-v-6702e325="">
                                    <div class="col mr mi-input " data-v-6702e325="" data-v-968989be="">
                                        <label class="input-label">姓名</label>
                                        <input autocomplete="off" class="input-text " data-v-968989be=""
                                               maxlength="" name="name" placeholder="" type="text">
                                        <!---->
                                        <!---->
                                        <p class="msg msg-error" data-v-968989be="" style="display: none;"></p><span class="iconfont-circle-close icon-error"
                                                                                                                     data-v-968989be="" style="display: none;"></span>
                                    </div>
                                    <div class="col mi-input " data-v-6702e325="" data-v-968989be="">
                                        <label class="input-label">手机号</label>
                                        <input autocomplete="off" class="input-text " data-v-968989be="" maxlength=""
                                               name="telephone" placeholder="" type="text">
                                        <!---->
                                        <!---->
                                        <p class="msg msg-error" data-v-968989be="" style="display: none;"></p><span class="iconfont-circle-close icon-error"
                                                                                                                     data-v-968989be="" style="display: none;"></span>
                                    </div>
                                </div>
                                <!--省市区三级联动-->
                                <div class="item address-info-box" data-v-6702e325="">
                                    <div id="distpicker1">
                                        <select id="sheng" style="width: 120px;height: 30px;margin-left:10px;"></select>
                                        <select id="shi" style="width: 120px;height: 30px;margin-left:10px;"></select>
                                        <select id="qu" style="width: 120px;height: 30px;margin-left:10px;"></select>
                                    </div>
                                </div>
                                <div class="item" data-v-6702e325="">
                                    <div class="col mi-input " data-v-6702e325="" data-v-968989be=""><label class="input-label">详细地址</label>
                                        <textarea autocomplete="off" class="input-text" data-v-968989be="" maxlength="" name="addressInfo"
                                                  placeholder="详细地址，路名或街道名称，门牌号"></textarea>
                                        <!---->
                                        <p class="msg msg-error" data-v-968989be="" style="display: none;"></p><span class="iconfont-circle-close icon-error"
                                                                                                                     data-v-968989be="" style="display: none;"></span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="el-dialog__footer" data-v-54b15c30="" data-v-f6440f00="">
                        <button class="btn btn-primary" data-v-54b15c30="" data-v-f6440f00="">确定
                        </button>
                        <button class="btn btn-gray" data-v-54b15c30="" data-v-f6440f00="">取消</button>
                    </div>
                    <!---->
                    <!---->
                    <!---->
                </div>
            </div>
        </div>
    </div>
</div>
<!--修改功能-->
<div class="mi-popup2" data-v-54b15c30="" data-v-f6440f00="" style="z-index: 100;">
    <div class="mi-popup__mask mi-modal" data-v-f6440f00=""></div>
    <div class="mi-popup__box" data-v-f6440f00="">
        <div class="mi-popup__content" data-v-f6440f00="">
            <div class="mi-dialog__wrapper address-modal" data-v-54b15c30="" data-v-f6440f00="" style="width: 660px;">
                <div aria-modal="true" class="mi-dialog" data-v-54b15c30="" data-v-f6440f00="">
                    <div class="mi-dialog__header" data-v-54b15c30="" data-v-f6440f00="">
                        <span class="mi-dialog__title" data-v-54b15c30="" data-v-f6440f00="">修改收货地址</span>
                    </div>
                    <a class="mi-dialog__headerbtn" data-v-54b15c30="" data-v-f6440f00="">
                        <i class="mi-dialog__close iconfont" data-v-54b15c30="" data-v-f6440f00=""></i>
                    </a>
                    <div class="mi-dialog__body" data-v-54b15c30="" data-v-f6440f00="">
                        <div class="mi-dialog__inner">
                            <div class="address-add" data-v-6702e325="">
                                <div class="item" data-v-6702e325="">
                                    <div class="col mr mi-input " data-v-6702e325="" data-v-968989be="">
                                        <label class="input-label">姓名</label>
                                        <input autocomplete="off" class="input-text " data-v-968989be=""
                                               maxlength="" name="name" placeholder="" type="text">
                                        <!---->
                                        <!---->
                                        <p class="msg msg-error" data-v-968989be="" style="display: none;"></p><span class="iconfont-circle-close icon-error"
                                                                                                                     data-v-968989be="" style="display: none;"></span>
                                    </div>
                                    <div class="col mi-input " data-v-6702e325="" data-v-968989be="">
                                        <label class="input-label">手机号</label>
                                        <input autocomplete="off" class="input-text " data-v-968989be="" maxlength=""
                                               name="telephone" placeholder="" type="text">
                                        <!---->
                                        <!---->
                                        <p class="msg msg-error" data-v-968989be="" style="display: none;"></p><span class="iconfont-circle-close icon-error"
                                                                                                                     data-v-968989be="" style="display: none;"></span>
                                    </div>
                                </div>
                                <!--省市区三级联动-->
<%--                                <div class="item address-info-box" data-v-6702e325="">--%>
<%--                                    <div id="distpicker1">--%>
<%--                                        <select id="sheng" style="width: 120px;height: 30px;margin-left:10px;"></select>--%>
<%--                                        <select id="shi" style="width: 120px;height: 30px;margin-left:10px;"></select>--%>
<%--                                        <select id="qu" style="width: 120px;height: 30px;margin-left:10px;"></select>--%>
<%--                                    </div>--%>
<%--                                </div>--%>
                                <div class="item" data-v-6702e325="">
                                    <div class="col mi-input " data-v-6702e325="" data-v-968989be=""><label class="input-label">详细地址</label>
                                        <textarea autocomplete="off" class="input-text" data-v-968989be="" maxlength="" name="addressInfo"
                                                  placeholder="详细地址，路名或街道名称，门牌号"></textarea>
                                        <!---->
                                        <p class="msg msg-error aid" data-v-968989be="" style="display: none;"></p><span class="iconfont-circle-close icon-error"
                                                                                                                     data-v-968989be="" style="display: none;"></span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="el-dialog__footer" data-v-54b15c30="" data-v-f6440f00="">
                        <button class="btn btn-primary" data-v-54b15c30="" data-v-f6440f00="">确定
                        </button>
                        <button class="btn btn-gray" data-v-54b15c30="" data-v-f6440f00="">取消</button>
                    </div>
                    <!---->
                    <!---->
                    <!---->
                </div>
            </div>
        </div>
    </div>
</div>

<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<script src="${pageContext.servletContext.contextPath}/st/front/JS/distpicker.data.js"></script>
<script src="${pageContext.servletContext.contextPath}/st/front/JS/distpicker.js"></script>
<script src="${pageContext.servletContext.contextPath}/st/front/JS/main.js"></script>
<jsp:include page="/Front_Tail"></jsp:include>
</body>
</html>

